<template>
	<view>
		<view class="gt-form-item">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view v-if="required" class="gt-form-required">*</view>
					<view class="gt-form-label">{{label}}</view>
					<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999"
						@click="showDesc()">
					</uni-icons>
				</view>
			</view>
			<view class="gt-form-body">
				<view class="row" :class="[size=='sm' ? 'upload-small' : '']" @mousemove="mousemove"
					@mouseup="mouseUpFileItem()">
					<view style="border-radius: 5px;" class="bg-img" :class="[limit===1 ? '' : 'uplod-item-magin' ]"
						:style="'width:'+bgImgWidth+'px;height:'+bgImgHeight+'px;background:url('+defaultImgUrl+')'"
						v-for="(item,index) in fileList" :key="index">
						<view class="upload-item" ref="fileItems" v-show="index!==mouseFile.index">
							<view class="upload-item-childen bg-img" :style="'background:url('+ $fun.imgUrl(item) +')'"
								:id="'fileItem'+index" @mousedown="mouseDownFileItem(index,item)">
								{{ fileType != 'image' ? fileType : '' }}
							</view>
							<view class="upload-item-childen-del pointer" @click="delFile(index)">
								<view class="iconfont icon-close"></view>
							</view>
							<view v-if="fileType == 'image'" class="upload-item-children-show-imgs" @click.stop="$fun.showImgs(fileList,index)">
								<uni-icons type="eye" size="14px" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
					<view :style="'width:'+bgImgWidth+'px;height:'+bgImgHeight+'px;'"
						style="margin: 0 10px 10px 0;background-color: #f5f5f5;border-radius: 5px;display: none;"
						ref="moveFile">
						<view class="upload-item" @mouseup="mouseUpFileItem()">
							<view class="upload-item-childen bg-img" :style="'background:url('+ mouseFile.url +')'">
							</view>
							<view class="upload-item-childen-del pointer">
								<view class="iconfont icon-close"></view>
							</view>
						</view>
					</view>
				
				
					<view class="upload-item-childen pointer" @click="uploadFile()" v-show="showUploadBtn"
						style="position: inherit;">
						<view class="iconfont icon-add"></view>
					</view>
					<!-- <view v-if="type == 'default'" class="upload-item-childen pointer" @click="uploadFile()" v-show="showUploadBtn">
						<view class="iconfont icon-add"></view>
					</view> -->
					<uni-popup v-if="type=='history'" type="center" ref="popup">
						<view style="width:915px;height: 700px;background-color: #fff;border-radius: 5px;">
							<view class="row" style="padding:0 30px ;border-bottom: 1px solid #eeeeee;">
								<view class="col-auto t-lg l-h-bg">选择图片</view>
								<view class="t-bg pointer" @click="$refs.popup.close()">×</view>
							</view>
							<view class="pd-30">
								<gt-file-space @change="changeSelectFileUrl" :limit="limit" type="select"></gt-file-space>
							</view>
						</view>
					</uni-popup>
				</view>
				<view v-if="error!== false" class="gt-form-error">{{error}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-upload-file",
		props: {
			value: {
				type: [String,Boolean],
				default: () => {
					return '';
				}
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			file_name: {
				type: String,
				default: () => {
					return '';
				}
			},
			type: {
				type: String,
				default: () => {
					return 'default';
				}
			},
			fileType: {
				type: String,
				default: () => {
					return 'image';
				}
			},
			limit: {
				type: [Number, String],
				default: () => {
					return 0;
				}
			},
			size: {
				type: [String, Number],
				default: 'default'
			},
			height: {
				type: [String, Number],
				default: 'default'
			},
			width: {
				type: [String, Number],
				default: 'default'
			},
			bgImgWidth: {
				type: [String, Number],
				default: '60px'
			},
			bgImgHeight: {
				type: [String, Number],
				default: '60px'
			},
			isUpload: {
				type: [String, Boolean],
				default: false
			},
		},
		data() {
			return {
				selectFileUrl: '',
				mouseFile: {
					index: '',
					url: ''
				},
				fileItemsNode: [],
				defaultImgUrl: ''
			}
		},
		created() {
			this.defaultImgUrl = this.$var.apiUrl + '/static/img/bg_default_80.png';
			let _this = this;
			if (this.isUpload) {
				setTimeout(function() {
					_this.openPopup();
				}, 1)
			}
		},
		computed: {
			fileList() {
				if (this.type == 'video') {
					let list = this.value ? this.value.split(',') : [];
					for (var i in list) {
						list[i] += '?vframe/jpg/offset/1';
					}
					return list;
				} else {
					return this.value ? this.value.split(',') : [];
				}

			},
			showUploadBtn() {
				var list = this.value ? this.value.split(',') : [];
				return this.limit === 0 || this.limit > list.length ? true : false;
			}
		},
		updated() {
			let _this = this;
		},
		watch: {},
		methods: {
			openPopup() {
				this.$refs.popup.open();
			},
			onChange(e) {},
			mousemove(e) {
				let index = this.mouseFile.index;
				let newIndexCount;
				if (index !== '' && this.$refs.moveFile) {
					this.$refs.moveFile.$el.style = "position:fixed;top:" + (e.clientY + 30) + "px;left:" + (e
						.clientX - 30) + "px;z-index:1;display:block"
					let list = [];
					let isMove = false;
					for (let i in this.fileItemsNode) {
						let row = this.fileItemsNode[i];
						if (i != index) {
							// console.log(i,index);
							let offsetX = e.clientX - row.left;
							let offsetY = e.clientY - row.top;
							// console.log('offsetX', offsetX)
							// console.log('offsetY', offsetY)
							if ((offsetX > 0 && offsetX < 30) && (offsetY > 0 && offsetY < 60)) { //左边
								newIndexCount = list.push(this.fileList[index]);
								list.push(this.fileList[i])
							} else if ((offsetX > 30 && offsetX < 60) && (offsetY > 0 && offsetY < 60)) { //右边
								list.push(this.fileList[i]);
								newIndexCount = list.push(this.fileList[index]);
							} else {
								list.push(this.fileList[i]);
							}
						}
					}
					// console.log(this.fileList.length);
					// console.log(list.length);
					if (newIndexCount && this.fileList.length == list.length) {
						this.mouseFile.index = newIndexCount - 1;
						this.$emit('input', list.join(','));
						// this.$refs.fileItems[index].$el.style = "position: static;";
					}
				}
			},
			mouseDownFileItem(index, url) {
				return false;
				this.mouseFile.index = index;
				this.mouseFile.url = url;
				const query = uni.createSelectorQuery().in(this);
				let _this = this;
				_this.fileItemsNode = [];
				for (let i in this.fileList) {
					query.select('#fileItem' + i).boundingClientRect(data => {
						_this.fileItemsNode[i] = data;
					}).exec();
				}

			},
			mouseUpFileItem() {
				// console.log('mouseUpFileItem')
				this.$refs.moveFile.$el.style = "display:none";
				this.mouseFile.index = '';
				this.mouseFile.url = '';

			},
			changeSelectFileUrl(str) {
				let newList = str.split(',');
				let newCount = newList.length;
				let oldList = this.value ? this.value.split(',') : [];
				// console.log(oldList)
				let oldCount = oldList.length;
				let limit = parseInt(this.limit);
				if (limit > 0 && oldCount > 0 && newCount > 0) {
					if (newCount + oldCount > limit) {
						let index = limit - newCount;
						oldList.splice(index)
					}
					let oldStr = oldList.join(',');
					let selectFileUrl = oldStr ? oldStr + ',' + str : str;
					this.$emit('input', selectFileUrl);
					this.$refs.popup.close();
				} else {
					let selectFileUrl = this.value ? this.value + ',' + str : str;
					this.$emit('input', selectFileUrl);
					this.$refs.popup.close();
				}

			},
			addFile(filePath) {
				var list = this.value ? this.value.split(',') : [];
				list.push(filePath);
				console.log(list.join(','))
				this.$emit('input', list.join(','));
			},
			delFile(index) {
				// console.log(1);
				var list = this.value.split(',')
				var listArr = [];
				for (var i in list) {
					if (i != index) {
						listArr.push(list[i]);
					}
				}
				console.log(listArr.join(','))
				let changeData = listArr.join(',');
				this.$emit("input", changeData);
				this.$forceUpdate()
			},
			uploadFile() {
				if (this.type == 'default') {
					var _this = this;
					this.$tools.uploadFile({
						type: this.fileType,
						success: (filePath, fileInfo) => {
							filePath = _this.$var.fileUrl + filePath;
							// console.log(filePath);
							// console.log(fileInfo);
							console.log('success',filePath)
							_this.addFile(filePath);
						},
						loading(progress) {
							// 加载进度
							// console.log(progress);
						}
					})
				} else {
					this.$refs.popup.open()
				}

			}
		},
		mounted() {}
	}
</script>

<style scoped>
	.upload-item {
		position: relative;
		/* margin-right: 10px;
		margin-bottom: 10px; */
		cursor: pointer;
	}

	.uplod-item-magin {
		margin: 0 10px 10px 0;
	}

	.upload-item-childen {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px #cccccc dashed;
		border-radius: 3px;
		text-align: center;
		line-height: 80px;
	}

	.upload-item-childen-del {
		width: 20px;
		height: 20px;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 10px;
		position: absolute;
		right: -5px;
		top: -5px;
		line-height: 20px;
		text-align: center;
		font-weight: 900;
	}

	.icon-close {
		font-size: 12px;
		color: #fff;
	}

	.icon-add {
		font-size: 50px;
		color: #ccc;
	}

	.upload-small .upload-item-childen {
		width: 60px !important;
		height: 60px !important;
		line-height: 60px !important;
	}

	.upload-small .icon-add {
		font-size: 40px !important;
	}

	.upload-item-children-show-imgs {
		width: 30px;
		height: 30px;
		background-color: rgba(0, 0, 0, .3);
		text-align: center;
		line-height: 30px;
		font-size: 10px;
		color: #fff;
		border-radius: 0 10px 0 0;
		position: absolute;
		bottom: 0;
		left: 0;
		display: none;
	}

	.upload-item:hover .upload-item-children-show-imgs {
		display: block !important;
	}
</style>
